<script lang="ts" setup>
import { LINK_HOME, NOT_IN_TABS_LIST } from '@/router/constants';
import { useHeaderSetting } from '@/layouts/use/useHeaderSetting';
import { PAGE_NOT_FOUND_ROUTE } from '@/router/constants';
import { useUserStore } from '@/store/modules/user';
import { isNumber } from '@vc/utils';
import Menu from './menu/index.vue';
import Search from '@/components/search/index.vue';
import UserInfo from './components/user-info.vue';

const router = useRouter();
const value = ref();
const userStore = useUserStore();
const { getLogoSrc, getLogoText } = useHeaderSetting();

let menuRef = ref();

const headerProps = computed(() => {
  return {
    logoCfg: {
      logo: getLogoSrc.value,
      title: getLogoText.value,
      jumpPath: LINK_HOME
    }
  };
});

const showMask = computed(() => {
  return isNumber(menuRef.value?.activeIndex);
});
</script>

<template>
  <vc-overlay :mask="showMask" onlyNode class="fixed left-0 right-0 z-12 overflow-hidden">
    <vc-layout-header v-bind="headerProps" :showMask="showMask">
      <template #left>
        <Menu ref="menuRef" />
      </template>
      <div class="flex align-center">
        <div class="mr-34px search-content">
          <search :focusWidth="380" :width="230" v-model="value" :prefixIcon="{ icon: 'vi-sousuo', color: '#FFFFFF', cursor: true }" :suffixIcon="{}" placeholder="请输入企业名称关键字" />
        </div>
        <div class="help-tool">
          <!-- <vc-icon class="cursor-pointer" icon="vi-bangzhu" color="#FFFFFF" :size="22"></vc-icon> -->
          <vc-icon class="cursor-pointer" @click="() => router.push('/profile/message')" icon="vi-tongzhi" color="#FFFFFF" :size="22" :dot="true"></vc-icon>
        </div>
          <user-info :avatar="userStore.getUserInfo?.photo"/>
      </div>
      <template #bottom>
        <vc-multiple-tabs
          :notInTabPaths="NOT_IN_TABS_LIST"
          :notInRouteNames="[PAGE_NOT_FOUND_ROUTE.name]"
          :hasToken="!!userStore.getToken"
        />
      </template>
    </vc-layout-header>
  </vc-overlay>
</template>

<style lang="scss">
.vc-layout-header__left {
  min-width: $header-left-min-width;
}
</style>

<style lang="scss" scoped>
:deep(.vc-input__prefix){
  margin-left: 13px;
}
:deep(.vc-input__wrapper){
  height: 28px;
  background: rgba(255,255,255,0.3);
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  box-shadow:none; 
  .vc-input__inner{
    font-size: 12px;
    font-weight: 400;
    line-height: 28px;
    color: #ffffff;
    &::placeholder{
    color: #ffffff;  
    }
  }
}
:deep(.vc-input__wrapper.is-focus){
  height: 28px;
  background: #FFFFFF;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  box-shadow:none; 
  .vc-input__inner{
    font-size: 12px;
    font-weight: 400;
    line-height: 28px;
    color: #333333;
    &::placeholder{
    color: #999999;  
    }
  }
  .vc-input__prefix{
    .vc-input__icon{
      color: #666666 !important;
    }
  }
}
:deep(.vc-layout-header__right) {
  margin-right: 20px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
:deep(.vc-layout-header__left){
  .header-menu{
    .vc-badge__wrapper .vc-icon{
      display: flex;
      margin-top: 20px;
    }
  }
}
:deep(.search-content) {
  .vc-popover{
    padding: 15px
  }
}
:deep(.help-tool) {
  display: flex;
  gap: 20px;
  margin-right: 30px;
}
:deep(.vc-multiple-tabs){
  .vc-tabs__item{
    border: none !important;
    position: relative;
    margin-right: 1px;
    &::after{
      content: "";
      position: absolute;
      top: 30%;
      left: 100%;
      width: 1px;
      height: 40%;
      background: #E3E3E3;
    }
  .vc-multiple-tabs__title:hover{
    color: #02C680;
  }
  .is-icon-close:hover{
    color: #02C680;
  }
  }
}
</style>
